<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <radialGradient id="gradient1" spreadMethod="repeat">
          <stop offset="0" stop-color="#ff0" />
          <stop offset="100%" stop-color="#f00" />
        </radialGradient>
      </defs>

      <circle cx="50" cy="50" r="40" fill="url(#gradient1)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <radialGradient
          id="gradient2"
          cx="50%"
          cy="50%"
          r="30%"
          spreadMethod="repeat"
        >
          <stop offset="0" stop-color="#ff0" />
          <stop offset="100%" stop-color="#f00" />
        </radialGradient>
      </defs>

      <circle cx="50" cy="50" r="40" fill="url(#gradient2)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <radialGradient
          id="gradient3"
          cx="50%"
          cy="50%"
          r="30%"
          fr="20%"
          spreadMethod="repeat"
        >
          <stop offset="0" stop-color="#ff0" />
          <stop offset="100%" stop-color="#f00" />
        </radialGradient>
      </defs>

      <circle cx="50" cy="50" r="40" fill="url(#gradient3)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <radialGradient
          id="gradient4"
          cx="25%"
          cy="50%"
          r="25%"
          spreadMethod="repeat"
        >
          <stop offset="0" stop-color="#ff0" />
          <stop offset="100%" stop-color="#f00" />
        </radialGradient>
      </defs>

      <circle cx="50" cy="50" r="40" fill="url(#gradient4)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <radialGradient
          id="gradient5"
          cx="25%"
          cy="50%"
          r="25%"
          spreadMethod="repeat"
        >
          <stop offset="0" stop-color="#ff0" />
          <stop offset="100%" stop-color="#f00" />
        </radialGradient>
      </defs>

      <circle cx="50" cy="50" r="40" fill="url(#gradient5)" />
       <path d="M0 50H100M30 0V100" fill="none" stroke="#99f" stroke-width=".8" />
    </svg>

    <!-- <svg width="400" height="400" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="none" stroke="#66f" />
      <line x1="10" y1="50"
          x2="90" y2="50"
          stroke="#66f"
          stroke-width="1"/>
        <line x1="50" y1="10"
          x2="50" y2="90"
          stroke="#66f"
          stroke-width="1"/>
        <circle cx="50" cy="50" r="2" fill="#66f"/>  

        <circle cx="30" cy="50" r="20" fill="none" stroke="#fac" stroke-width="1"/>  
        <circle cx="30" cy="50" r="1" fill="#fac"/> 
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
          <radialGradient
            id="gradient4"
            cx="25%"
            cy="50%"
            r="25%"
            spreadMethod="repeat"
          >
            <stop offset="0" stop-color="#ff0" />
            <stop offset="100%" stop-color="#f00" />
          </radialGradient>
        </defs>
        <circle cx="50" cy="50" r="40" fill="url(#gradient4)" />
    </svg> -->

    <script src="index.js"></script>
  </body>
</html>
